<template>
    <!-- 图片表格（5个属性）
     两种使用方式：
     1.傻瓜式使用：按照指定格式传值<TableImage :table-title="tableTitle" :list-data="listData"></TableImage>
     2.插槽方式使用: 传值可以随便
            <template #left="slotProps">
                {{slotProps.data}}
            </template>
            <template #center="slotProps">
                {{slotProps.data}}
            </template>
            <template #right="slotProps">
                {{slotProps.data}}
            </template>
     -->
    <view class="table">
        <view class="table-title">
            <view v-for="(title, i) in tableTitle" class="table-title-item" :key="title + i">
                <text>{{title}}</text>
            </view>
        </view>
        <view v-for="(item, index) in listData" :class="{
                    'table-content-item': true, 'isColor': index%2!=1}" :key="item.id">
            <view class="left">
                <slot name="left" :data="item" v-if="left">
                    <image style="width: 70upx; height: 70upx; background-color: #eeeeee;"
                           :src="item.left.icon"></image>
                    <text v-if="item.left.value">{{item.left.value}}</text>
                </slot>
            </view>
            <view class="center" v-if="center">
                <slot name="center" :data="item">
                    <text>{{item.center}}</text>
                </slot>
            </view>
            <view class="right" v-if="right">
                <slot name="right" :data="item">
                    <text>{{item.right}}</text>
                </slot>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "TableImage",
        props: {
            left: {
                type: Boolean,//是否展示 true展示 false隐藏
                default: true
            },
            center: {
                type: Boolean,
                default: true
            },
            right: {
                type: Boolean,
                default: true
            },
            tableTitle: {// 最多三项
                type: Array,
                default() {
                    return ["left", "center", "right"];
                }
            },
            listData: {
                type: Array,
                default() {
                    return [
                        /*{
                            id: 1,
                            left: {
                                icon: "../../static/img/success_icon.png",
                                value: "审核状态"
                            },
                            center: "center",
                            right: "right"
                        },*/
                    ]
                }
            }
        },
        data() {
            return {
            }
        }
    }
</script>

<style scoped lang="scss">
    .table {
        width: 100%;
        .table-title {
            width: 100%;
            display: flex;
            justify-content: space-around;
            box-sizing: border-box;

            padding: 20upx 0upx;
            color: #333;
            font-weight: bold;
            border-bottom: 1px solid #ccc;
            background: #f2f2f2;

            .table-title-item {
                flex: 1;
                display: flex;
                flex-wrap: nowrap;
                justify-content: center;
                border-right: 1px solid #ccc;

                padding: 20upx 0upx;

                &:last-of-type {
                    border-right: none;
                }
            }
        }
        .table-content-item {
            width: 100%;
            display: flex;
            justify-content: space-around;
            box-sizing: border-box;

            padding: 10upx 0upx;
            border-bottom: 1px solid #e5e5e5;

            &.isColor {
                background-color: #eee;
            }
            view {
                flex: 1;

                &.left,&.center,&.right {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                }
                &.center {
                    color: green;
                    border-right: 1px solid #ccc;
                }

                &.left {
                    border-right: 1px solid #ccc;
                    /*align-items: start;*/
                    overflow: hidden;
                    text {
                        width: 100%;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }

                &.right {
                    color: red;
                }
            }
            /*价格策略表 标题*/
            &.title {
                font-size: 30upx;
                font-weight: bold;
                border-bottom: 3px solid #ccc;
            }
            /*价格策略表 数据*/
            .number {
                width: 50%;
                font-size: 28upx;
            }
        }
    }
</style>
